<template>
    <div class="root">
      <div class="toSelectTime">
            <!-- <el-button type="plain" round style="margin-right: 50px;" @click="updateChart()">年数据</el-button> -->
            <el-button type="plain" round @click="toSelectMonth">月数据</el-button>
             <el-date-picker v-model="selectmonth" type="month" placeholder="选择月" v-show="monthselect" style="position: absolute; right: 49%" @change="changeMonth"></el-date-picker>
      </div>
        <div class="heatmap" id="heatmap"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { containsSubstring,formatDateMonth } from "@/tool/tool.js";
var hours =[
            '12a', '1a', '2a', '3a', '4a', '5a', '6a',
            '7a', '8a', '9a', '10a', '11a',
            '12p', '1p', '2p', '3p', '4p', '5p',
            '6p', '7p', '8p', '9p', '10p', '11p'
        ];
var days = [
            "代收款","工资","投资回报","贷款结算","转账","还款"
          ]
var  mapdata = [[0, 0, 5], [0, 1, 1], [0, 2, 0], 
        [0, 3, 0], [0, 4, 0], [0, 5, 0], 
        [0, 6, 0], [0, 7, 0], [0, 8, 0], 
        [0, 9, 0], [0, 10, 0], [0, 11, 2], 
        [0, 12, 4], [0, 13, 1], [0, 14, 1], 
        [0, 15, 3], [0, 16, 4], [0, 17, 6], 
        [0, 18, 4], [0, 19, 4], [0, 20, 3], 
        [0, 21, 3], [0, 22, 2], [0, 23, 5], 
        [1, 0, 7], [1, 1, 0], [1, 2, 0],  
        [1, 3, 0], [1, 4, 0], [1, 5, 0], 
        [1, 6, 0], [1, 7, 0], [1, 8, 0], 
        [1, 9, 0], [1, 10, 5], [1, 11, 2], 
        [1, 12, 2], [1, 13, 6], [1, 14, 9], 
        [1, 15, 11], [1, 16, 6], [1, 17, 7], 
        [1, 18, 8], [1, 19, 12], [1, 20, 5], 
        [1, 21, 5], [1, 22, 7], [1, 23, 2], 
        [2, 0, 1], [2, 1, 1], [2, 2, 0], 
        [2, 3, 0], [2, 4, 0], [2, 5, 0], 
        [2, 6, 0], [2, 7, 0], [2, 8, 0], 
        [2, 9, 0], [2, 10, 3], [2, 11, 2], 
        [2, 12, 1], [2, 13, 9], [2, 14, 8], 
        [2, 15, 10], [2, 16, 6], [2, 17, 5],
         [2, 18, 5], [2, 19, 5], [2, 20, 7], 
         [2, 21, 4], [2, 22, 2], [2, 23, 4], 
         [3, 0, 7], [3, 1, 3], [3, 2, 0], 
         [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]]
        .map(function (item) {
        return [item[1], item[0], item[2] || '-'];
        })
export default {
    name: "heatmap",
    data() {
    return {
        everymonthData:{},
        tmpDataIn:{},
        tmpDataOut:{},
        monthselect:true,
        selectmonth:"2024-01",
        option : {
            tooltip: {
              position: 'top'
            },
            grid: {
              height: '70%',
              top: '10%'
            },
            xAxis: {
              type: 'category',
              data: hours,
              splitArea: {
                show: true
              }
            },
            yAxis: {
              type: 'category',
              data: days,
              splitArea: {
                show: true
              }
            },
            visualMap: {
              min: 0,
              max: 10,
              calculable: true,
              orient: 'horizontal',
              left: 'center',
              bottom: '0%'
            },
            toolbox: {
                show: true,
                feature: {
                  mark: { show: true },
                  saveAsImage: { show: true }
                }
              },
            series: [
              {
                name: 'Punch Card',
                type: 'heatmap',
                data: mapdata,
                label: {
                  show: true
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
        }
      }
    
  },
    created(){
        this.$echarts = echarts
         
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });

    },
    methods:{
        
        toSelectMonth(){

        },
        updateChart(data = undefined){
          this.option.series[0].data = [];
          const myChart = this.$echarts.init(document.getElementById('heatmap'));
          this.tmpDataIn =  data.heatmapIn;
          this.tmpDataOut =  data.heatmapOut;
          this.tmpDataTotal = data.heatmapTotal;
          // let index = 0;
          let index =0;
          // 做月份的数据
          for(let keyM in this.tmpDataIn){
            // "2024-01"
            // 做当月的数据
            // 构造一个包含24个空数组的大数字
            index = 0;
            
            this.everymonthData[keyM] = {};
            for(let key in this.tmpDataTotal[keyM]){
                let arrayOfEmptyArrays = new Array(24).fill([0,0,0]);
                // 种类 代收款
                // 做当月每个种类的数据
                this.tmpDataTotal[keyM][key].forEach(element => {
                // 时间数据   2024-01-04 00:57:12
                    let getHour = new Date(element).getHours();
                    if(arrayOfEmptyArrays[getHour][2] == undefined){
                      arrayOfEmptyArrays[getHour][2] = 0;
                    }
                    arrayOfEmptyArrays[getHour] = [getHour,index,arrayOfEmptyArrays[getHour][2]+1]
                    this.everymonthData[keyM][key] = arrayOfEmptyArrays;
                });
              index++;
              
            }
            console.log(this.everymonthData)            
          }
          this.changeMonth();
          // 绘制图表
          myChart.setOption(this.option,true);
        },
        changeMonth(){
          this.option.series[0].data = [];
          let selectmonth = formatDateMonth(this.selectmonth)
          let monthdata = this.everymonthData[selectmonth]
          let optionData = [];
          for(let key in monthdata){
            monthdata[key].forEach(element => {
              optionData.push(element);
            })
          }
          optionData = optionData.map(function (item) {
            return [item[0], item[1], item[2] || 0];
          })
          optionData.sort(function(a, b) {
            return a[0] - b[0]; // 按小数组的第一位进行升序排序
          });
          this.option.series[0].data = optionData;
          const myChart = this.$echarts.init(document.getElementById('heatmap'));
          console.log(this.option.series[0].data)
          myChart.setOption(this.option,true);
        },
        initChart(){
            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('heatmap'));
            myChart.setOption(this.option,true);
        }
    }
}
</script>

<style scoped>
.root{
  display: flex;
  flex-direction: column;
  width: 100%;
  height:  100%
}
.heatmap{
    box-sizing: border-box;
    width: 100%;
    height:  100%;
    padding: 10px;
}
.heatmapday{
    box-sizing: border-box;
    width: 100%;
    height:  100%;
    padding: 10px;
}
        
</style>

